/**
 * 1-6关：每次最多生成1朵云
 * 7-12关：每次最多生成2朵云
 * 13-18关：每次最多生成3朵云
 * 
 * 每一关生成的总瓶子数30-50个
 */
window.onload = function() {
	var wrap = document.querySelector('.wrap'),
		bg_box = document.querySelector('.bg_box'),
		bg_img = document.querySelectorAll('.bg_img'),
		ball = document.querySelector('.ball_box'),
		ball_img = document.querySelector('.ball_img'),
		yun = document.getElementsByClassName('yun'),
		water = document.getElementsByClassName('water'),
		time_box = document.querySelector('.time_box'),
		life_box = document.querySelector('.life_box'),
		left_arr = ['1%', '25%', '50%', '75%'], //水平位置
		//显示类节点
		tips = document.querySelector('.tips'),
		yes = document.querySelector('.yes'),
		no = document.querySelector('.no'),
		level_box = document.querySelector('.level'),
		last = document.querySelector('.last span'),
		//变量
		life = 5, //生命数
		game_times = 0, //游戏计时
		total_times, //游戏过关时长
		level, //关卡数
		yun_num, //每次生成云的数量
		//时间变量
		yun_create_time, //云生成间隔
		yun_down_time, //下行总耗时
		//定时器
		yun_timer,
		water_timer,
		byTime_timer,
		crash_timer,
		//开关
		crash_onoff = true,
		//碰撞结果
		yun_res,
		water_res;

	//显示框初始化
	time_box.innerText = game_times;
	life_box.innerText = life;

	//location.search.replace('?', '');//截取地址参数

	//关卡难度初始化
	level = Math.floor((Math.random() * 17) + 1);
	level_box.innerText = "第" + level + "关";

	if(level <= 4) {
		total_times = 1800;
	} else {
		total_times = 3600;
	}

	if(level >= 1 && level <= 6) {
		yun_num = 1;
	} else if(level >= 7 && level <= 12) {
		yun_num = 2;
	} else if(level >= 13 && level <= 18) {
		yun_num = 3;
	}

	if(level <= 1) {
		yun_create_time = 1000;
		yun_down_time = 2;
	} else {
		yun_create_time = 1000 - level * 23;
		yun_down_time = 2 - level * 0.0278;
	}

	//背景轮播
	function bg_run() {
		bg_box.style.transform = 'translateY(' + bg_img[0].scrollHeight + 'px)';
		bg_box.addEventListener('transitionend', run_end);

		function run_end() {
			bg_box.style.transition = 'none';
			bg_box.style.transform = 'translateY(0%)';
			getComputedStyle(bg_box).transition;
			bg_box.style.transition = '';
			bg_box.removeEventListener('transitionend', run_end);
			bg_run();
		}
	}
	bg_run();

	//游戏计时
	function byTime() {
		byTime_timer = setInterval(function() {
			time_box.innerText = game_times++;
		}, 1000);
	}
	byTime();

	function create() {
		//生成云
		yun_timer = setInterval(function() {
			for(var i = 0; i < yun_num; i++) {
				var num = Math.floor(Math.random() * 4);
				var new_yun = document.createElement('div');
				new_yun.classList.add('yun');
				new_yun.innerHTML = '<img src="img/game_ui/yun.png"/>';
				new_yun.setAttribute('style', 'left: ' + left_arr[num] + ';');
				new_yun.style.animationDuration = yun_down_time + "s";
				wrap.appendChild(new_yun);
				yun.length > 10 ? yun[0].remove() : '';
			}
		}, yun_create_time);
		//clearInterval(yun_timer);

		//生成水
		var type = "add"; //瓶子类型
		var water_create_time = 3000; //云生成间隔
		var water_down_time = 2; //下行总耗时
		water_timer = setInterval(function() {
			var num = Math.floor(Math.random() * 75);
			var new_water = document.createElement('div');
			new_water.classList.add('water');
			new_water.innerHTML = '<img data-type="' + type + '" src="img/game_ui/water.png"/>';
			new_water.setAttribute('style', 'left: ' + num + '%;');
			new_water.style.animationDuration = water_down_time + "s";
			wrap.appendChild(new_water);
			water.length > 3 ? water[0].remove() : '';
		}, water_create_time);
		//clearInterval(water_timer);
	}
	create();

	//拖拽
	ball.addEventListener('touchstart', function(e) {
		var touches = e.touches[0]; //关键的一步！不懂，先写！
		var ball_w = touches.clientX - ball.offsetLeft;
		document.addEventListener('touchmove', move);
		//ball移动事件
		function move(e) {
			var touches = e.touches[0];
			var ball_left = touches.clientX - ball_w;
			//左右边界判断
			if(ball_left < 0) {
				ball_left = 0;
			} else if(ball_left > window.screen.width - ball.offsetWidth) {
				ball_left = (window.screen.width - ball.offsetWidth);
			}
			ball.style.left = ball_left + 'px';
		}
		//移除事件
		ball.addEventListener('touchend', function() {
			document.removeEventListener('touchmove', move);
		});
	});

	//提示弹窗
	function tip() {
		clearInterval(yun_timer);
		clearInterval(water_timer);
		clearInterval(byTime_timer);
		clearInterval(crash_timer);
		tips.style.display = 'block';
		last.innerText = life;
		yes.addEventListener('click', is);

		function is() {
			tips.style.display = '';
			create();
			byTime();
			crash();
			yes.removeEventListener('click', is);
		}

		no.addEventListener('click', function() {
			CloseConnect();
			window.location.href = 'game_over.html?time=' + time_box.innerText + '&level=' + level; //游戏结束
		});
	}

	//检测函数
	function detection(obj1, obj2) {
		var l1 = obj1.offsetLeft,
			r1 = obj1.offsetLeft + obj1.offsetWidth,
			t1 = obj1.offsetTop,
			b1 = obj1.offsetTop + ball_img.offsetHeight;
		var l2 = obj2.offsetLeft,
			r2 = obj2.offsetLeft + obj2.offsetWidth,
			t2 = obj2.offsetTop,
			b2 = obj2.offsetTop + obj2.offsetHeight;

		if(l2 > r1 || t2 > b1 || l1 > r2 || b2 < t1) {
			return false;
		} else {
			return true;
		}
	}

	//碰撞函数
	function crash() {
		crash_timer = setInterval(function() {
			if(yun.length > 0) { //云
				for(var i = 0; i < yun.length; i++) { //遍历云
					if(crash_onoff) {
						crash_onoff = false;
						yun_res = detection(ball, yun[i]);
						if(yun_res) {
							life--; //与云发生了碰撞，生命减一
							life_box.innerText = life;
							document.querySelectorAll('.yun').forEach(function(item) {
								item.remove();
							});
							document.querySelectorAll('.water').forEach(function(item) {
								item.remove();
							});
							tip(); //显示弹窗
							cloud(); //撞到云
						}
						crash_onoff = true;
					}
					if(life <= 0) {
						window.location.href = 'game_over.html?time=' + time_box.innerText + '&level=' + level; //游戏结束
					}
				}
			}
			if(water.length > 0) { //水
				for(var i = 0; i < water.length; i++) {
					water_res = detection(ball, water[i]);
					if(water_res) {
						water[i].remove();
						bottle(); //撞到瓶
					}
				}
			}
		}, 100);
	}
	crash();

	//console.log(water[i].childNodes[0].dataset.type);
};